<div id="backdropMix" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="loginWindowModalLabel" aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal"
			aria-hidden="true">×</button>	
	
	   <ul class="nav nav-tabs" id="mytabs">
         <li class="active"><a href="#lettuces" data-toggle="tab" onclick="step(1, false)")>Lettuces</a></li>
         <li><a href="#toppings" data-toggle="tab" onclick="step(2, false)">Toppings</a></li>
         <li><a href="#proteins" data-toggle="tab" onclick="step(3, false)">Proteins</a></li>
         <li><a href="#dressings" data-toggle="tab" onclick="step(4, false)">Dressings</a></li>
       </ul>
    </div>
    <form action="/saladController/createSalad" method="post" class="form-inline">
	
	    <div class="modal-body">
		    <div id="salad">
		        <!-- customSalad.html contains the content here. -->
		    </div>		
		    			
	        <div class="tab-content" id="ingredients">
		        <!-- indredients.html contains the content here. -->
		    </div>
						
			
		</div>
	
		<div class="modal-footer">
				<a id="backSaladButton" class="btn btn-primary btn-small pull-left" onclick="backStep()">Back</a>
				<a id="nextSaladButton" class="btn btn-primary btn-small  pull-left" onclick="nextStep()">Next</a>
			
			<div class="control-group">
				<button id="createSaladButton" class="btn btn-primary" type="submit">Create Salad</button> 
				<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>		
			</div>
		</div>
	</form>
</div>

<script type="text/javascript" charset="UTF-8">
		    
    var refreshIngredients = function() {
    	  	
    	var ingredientsAction = #{jsAction @SaladController.ingredients() /}
		//jQuery.post( ingredientsAction(), function() {
		$('#ingredients').load( ingredientsAction(), function() {
      	  // Do something after loading.
      	  //floating_window('backdropMix', 'boxMix');  
      	  $('#backdropMix').modal();
      	  //alert("result")
			//$('#lettuces').load()
      });
	}
		
	var addToSaladAjax = function(id, isChecked) {
		var addToSaladAction = #{jsAction @SaladController.addToSalad(':ingredientId', ':checked') /}
		jQuery.post( addToSaladAction( { ingredientId: id, checked: isChecked} ) , function() {
	      	  // Reload cart after adding the product
	      	  refreshSalad()
	      });
	}    
	 
	function addToSalad(id, isChecked) {
		addToSaladAjax(id, isChecked)        
	}
	
	var onRefreshSalad = function() {
	}
	
	var refreshSalad = function() {
		var customSaladAction = #{jsAction @SaladController.customSalad() /}
		$('#salad').load(customSaladAction(), onRefreshSalad);
	}
    
	refreshSalad();
	
	stepValue = 1
	$('#createSaladButton').hide()
	$('#backSaladButton').hide()
	function backStep()
	{
		step (stepValue - 1, true)
	}
	
	function nextStep()
	{
		step (stepValue + 1, true)
	}
	
	function step(value, flag)
	{
		stepValue = value
		if (flag)
			$('#mytabs li:eq('+(stepValue-1)+') a').tab('show')
		if (stepValue == 4) {
			$('#createSaladButton').css({"display":"inline"})
			$('#backSaladButton').css({"display":"inline"})
			$('#nextSaladButton').hide()
			
		} else if (stepValue == 1) {
			$('#createSaladButton').hide()
			$('#backSaladButton').hide()
			$('#nextSaladButton').css({"display":"inline"})
		} else {
			$('#createSaladButton').hide()
			$('#backSaladButton').css({"display":"inline"})
			$('#nextSaladButton').css({"display":"inline"})				
		}
	}
	
	
</script>